'use strict'
import React, { Component } from 'react';
import {
  StyleSheet,
  View,
  Text,
  TouchableHighlight,
  Modal,
  TouchableOpacity
} from 'react-native';

export default class DialogBasics extends Component {
  constructor(props) {
    super(props);
    this.state = {
      modalVisibility: false,
    };
  }
  static defaultProps = {
    // 主标题
    title: '标题',
    // 内容
    message: '内容',
    // 左边显示的文字
    leftButtonText: '取消',
    // 左边button文字样式
    leftButtonTextStyle: null,
    // 右边显示的文字
    rightButtonText: '确定',
    // 右边button文字样式
    rightButtonTextStyle: null,
    // 弹框样式
    modalContainerStyle: undefined,
    // 主标题样式
    modalTitleStyle: undefined,
    // 内容样式
    modalMessageStyle: undefined,
    // 点击左边按钮的回调
    onLeftPress: null,
    // 点击右边按钮的回调
    onRightPress: null
  }

  show() {
    this.setState({
      modalVisibility: true
    })
  }

  hide() {
    this.setState({
      modalVisibility: false
    })
  }

  render() {

    const { modalVisibility } = this.state
    const {
      title,
      message,
      leftButtonText,
      leftButtonTextStyle,
      rightButtonText,
      rightButtonTextStyle,
      modalContainerStyle,
      modalTitleStyle,
      modalMessageStyle,
      onLeftPress,
      onRightPress
    } = this.props

    return (
      <Modal
        // modal 是否显示
        visible={modalVisibility}
        // 背景是否透明
        transparent={true}
        //有三个值可以选择 none slide fade
        animationType={'none'}
        // 按下后退时执行（关闭）
        onRequestClose={() => this.hide()}
      >
        <View style={styles.container}>
          <View style={[styles.modalContainer, modalContainerStyle]}>
            <Text style={[styles.modalTitle, modalTitleStyle]}>{title}</Text>
            <Text style={[styles.modalMessage, modalMessageStyle]}>{message}</Text>
            <View style={styles.horizon} />
            <View style={styles.row}>
              <TouchableHighlight style={styles.left} onPress={onLeftPress} underlayColor={'#C5C5C5'}>
                <Text style={[styles.leftButtonText,leftButtonTextStyle]}>{leftButtonText}</Text>
              </TouchableHighlight>
              <View style={styles.vertical} />
              <TouchableHighlight style={styles.right} onPress={onRightPress}
                underlayColor={'#C5C5C5'} >
                <Text style={[styles.rightButtonText,rightButtonTextStyle]}>{rightButtonText}</Text>
              </TouchableHighlight>
            </View>
          </View>
        </View>
      </Modal >
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'rgba(0, 0, 0, 0.5)',
    justifyContent: 'center',
    alignItems: 'center'
  },
  modalContainer: {
    marginLeft: 40,
    marginRight: 40,
    borderRadius: 10,
    backgroundColor: "white",
    alignItems: 'center',
  },
  modalTitle: {
    color: '#000000',
    fontSize: 16,
    marginTop: 10,
  },
  modalMessage: {
    color: '#aaa',
    fontSize: 14,
    margin: 10,
  },
  row: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  horizon: {
    backgroundColor: '#ccc',
    height: 0.5,
    alignSelf: 'stretch'
  },
  vertical: {
    backgroundColor: '#9f9fa3',
    width: 1,
    alignSelf: 'stretch'
  },
  left: {
    borderBottomLeftRadius: 3,
    padding: 7,
    flexGrow: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  leftButtonText: {
    fontSize: 16,
    color: '#8a8a8a',
  },
  right: {
    borderBottomRightRadius: 3,
    padding: 7,
    flexGrow: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  rightButtonText: {
    fontSize: 16,
    color: '#00A9F2'
  }
})